<template>
  <div class="box">
    <!-- 简历详情部分 -->
    <div class="resumeDetails" ref="resumeDetailsDiv">
      <!-- 容器 -->
      <div class="container" ref="resumeDetails">
        <!-- 标题部分 -->
        <div class="top-section">
          <span>简历详情</span>
          <img
            src="../../assets/images/close.png"
            @click="closeResumeDetails"
            alt=""
          />
        </div>
        <!-- 工作部分 -->
        <div class="commu-job">
          <div>正在沟通：{{ newRegistrationInfo.title }}</div>
          <div @click="showComplainInfo">
            <img src="../../assets/images/complain_icon.png" alt="" /><span
              >投诉</span
            >
          </div>
        </div>
        <!-- 用户部分 -->
        <div class="job-resume-detail-content">
          <!-- 用户信息 -->
          <div class="userInfo">
            <!-- 用户姓名 -->
            <div class="info-section">
              <div class="info-content">
                <span>{{ newRegistrationInfo.name }}</span>
                <img src="../../assets/images/verify_label_pc.png" alt="" />
              </div>
              <div class="btn-desc">
                {{ newRegistrationInfo.status }}
              </div>
            </div>
            <!-- 用户头像 -->
            <div class="headImg">
              <img :src="newRegistrationInfo.img" alt="" />
            </div>
          </div>
          <!-- 状态信息 -->
          <div class="job-resume-model">
            <div class="job-resume-model-item">
              <div class="job-resume-model-item-text">
                <i></i>
                性别
              </div>
              <div class="job-resume-model-item-value">
                {{ newRegistrationInfo.sex }}
              </div>
            </div>
            <div class="job-resume-model-item">
              <div class="job-resume-model-item-text">
                <i></i>
                年龄
              </div>
              <div class="job-resume-model-item-value">
                {{ newRegistrationInfo.age }}
              </div>
            </div>
            <div class="job-resume-model-item">
              <div class="job-resume-model-item-text">
                <i></i>
                学历
              </div>
              <div class="job-resume-model-item-value">
                {{ newRegistrationInfo.school }}
              </div>
            </div>
          </div>
          <!-- 备注信息 -->
          <div class="remark-section">
            <div class="remark-content">
              <img
                src="../../assets/images/remark_edit.png"
                @click="toggleInput"
                alt=""
              />
              <span v-if="isInput">{{
                newRegistrationInfo.nickName | isNull
              }}</span>
              <div ref="resumeDetailsRemarks" v-else>
                <input
                  type="text"
                  ref="remarksInp"
                  v-model="newRegistrationInfo.myRemarkInput"
                  placeholder="请输入备注信息"
                />
                <button @click="confirmRemarks">确定</button>
                <button @click="cancelRemarks">取消</button>
              </div>
            </div>
            <div class="remark-section-refresh">
              {{ newRegistrationInfo.data }} 报名
            </div>
          </div>
        </div>
        <!-- 底部按钮部分 -->
        <div class="bottom-section">
          <!-- 标记部分 -->
          <div class="label-select">
            <div class="label-text" @click="showOption">标记</div>
            <!-- 标记里隐藏三角形 -->
            <div v-if="isOptions" class="label-triangle"></div>
            <!-- 标记里隐藏的内容 -->
            <div v-if="isOptions" class="select-options" ref="resumeDetails">
              <div class="label-content">
                <div class="opt-title">是否成功联系</div>
                <div class="option" @click="hasContactedMethod">
                  <img
                    v-if="hasContacted"
                    src="../../assets/images/opt-unselect.png"
                    alt=""
                  />
                  <img v-else src="../../assets/images/opt-select.png" alt="" />
                  已联系
                </div>
                <div class="option" @click="notContactedMethod">
                  <img
                    v-if="!hasContacted"
                    src="../../assets/images/opt-unselect.png"
                    alt=""
                  />
                  <img v-else src="../../assets/images/opt-select.png" alt="" />
                  未联系
                </div>
              </div>
              <div v-if="!hasContacted" class="suit">
                <div class="opt-title">是否合适</div>
                <div class="option" @click="suitableMethod">
                  <img
                    v-if="suitable"
                    src="../../assets/images/opt-unselect.png"
                    alt=""
                  />
                  <img v-else src="../../assets/images/opt-select.png" alt="" />
                  合适
                </div>
                <div class="option" @click="notSuitableMethod">
                  <img
                    v-if="!suitable"
                    src="../../assets/images/opt-unselect.png"
                    alt=""
                  />
                  <img v-else src="../../assets/images/opt-select.png" alt="" />
                  不合适
                </div>
              </div>
            </div>
          </div>
          <!-- 聊天部分 -->
          <div class="label-chat">
            <div class="phone" @click="showPhone">
              <img src="../../assets/images/phone.png" alt="" />
              <span ref="resumeDetailsPhone"> 获取手机号 </span>
            </div>
            <div class="online-chat" @click="showContactInterphase">
              <img src="../../assets/images/online-chat.png" alt="" />
              在线联系
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 投诉信息部分 -->
    <ComplainInfo ref="ComplainInfo" />
  </div>
</template>

<script>
// 引用公用样式
import "../../assets/css/all.css";
// 引入投诉信息部分组件
import ComplainInfo from "@/components/index/ComplainInfo.vue";

export default {
  name: "ResumeDetails",
  data() {
    return {
      // 新报名信息
      newRegistrationInfo: {
        title: "招聘店铺收银员",
        img: require("@/assets/images/user.png"),
        name: "张华",
        nickName: "",
        data: "11月21日 17:39",
        sex: "女",
        age: 22,
        school: "本科",
        phone: "13513137504",
        status: "未联系",
      },
      // 隐藏标记内容
      isOptions: false,
      // 已联系
      hasContacted: true,
      // 合适
      suitable: true,
      // 备注信息显示
      isInput: true,
    };
  },
  methods: {
    // 备注信息的显示
    toggleInput() {
      this.isInput = false;
    },
    // 确定备注
    confirmRemarks() {
      if (confirm("确定要修改备注信息吗？")) {
        // 更改备注信息
        this.newRegistrationInfo.nickName =
          this.newRegistrationInfo.myRemarkInput;
        this.isInput = true;
      }
    },
    // 取消备注
    cancelRemarks() {
      this.isInput = true;
    },
    // 打开联系界面
    showContactInterphase() {
      alert("打开联系界面！");
    },
    // 显示手机号
    showPhone() {
      this.$refs.resumeDetailsPhone.innerHTML = this.newRegistrationInfo.phone;
    },
    // 打开简历详情部分
    showResumeDetails() {
      this.$refs.resumeDetailsDiv.style.left = "0";
      this.$refs.resumeDetailsDiv.style.transition = "all ease .6s";
    },
    // 关闭简历详情部分
    closeResumeDetails() {
      this.$refs.resumeDetailsDiv.style.left = "-100%";
      this.$refs.resumeDetailsDiv.style.transition = "all ease .6s";
    },
    // 显示投诉信息
    showComplainInfo() {
      this.$refs.ComplainInfo.$refs.complainInfo.style.display = "block";
    },
    // 显示隐藏的内容
    showOption() {
      this.isOptions = !this.isOptions;
    },
    // 已联系
    hasContactedMethod() {
      this.newRegistrationInfo.status = "已联系";
      this.$refs.resumeDetails.style.width = "200px";
      this.hasContacted = false;
    },
    // 未联系
    notContactedMethod() {
      this.newRegistrationInfo.status = "未联系";
      this.$refs.resumeDetails.style.width = "120px";
      this.hasContacted = true;
    },
    // 合适
    suitableMethod() {
      this.newRegistrationInfo.status = "合适";
      this.suitable = false;
    },
    // 不合适
    notSuitableMethod() {
      this.newRegistrationInfo.status = "不合适";
      this.suitable = true;
    },
  },
  components: {ComplainInfo}
};
</script>

<style scoped>
.resumeDetails {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -100%;
  background: rgba(0, 0, 0, 0.6);
  transition: all ease 0.6s;
  z-index: 99;
}
/* 容器 */
.resumeDetails .container {
  width: 520px;
  height: 100%;
  padding: 0 20px;
  background: white;
  position: absolute;
  top: 0;
  right: 0%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 100;
}
/* 标题部分 */
.resumeDetails .top-section {
  height: 75px;
  line-height: 75px;
  color: #172238;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.resumeDetails .top-section img {
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin-top: 25px;
}
/* 工作部分 */
.resumeDetails .commu-job {
  height: 21px;
  line-height: 21px;
  color: #808999;
  font-size: 14px;
  padding-bottom: 21px;
  margin: 21px 0 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.resumeDetails .commu-job div {
  height: 20px;
  line-height: 20px;
  position: relative;
}
.resumeDetails .commu-job img {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: -18px;
}
/* 用户部分 */
.resumeDetails .job-resume-detail-content {
  height: 265px;
  margin-bottom: 76px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 用户信息 */
.resumeDetails .job-resume-detail-content .userInfo {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border: 1px solid red; */
  margin-bottom: 24px;
}
/* 用户姓名 */
.resumeDetails .job-resume-detail-content .userInfo .info-section {
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.resumeDetails
  .job-resume-detail-content
  .userInfo
  .info-section
  .info-content {
  color: #172238;
  font-size: 20px;
}
.resumeDetails
  .job-resume-detail-content
  .userInfo
  .info-section
  .info-content
  img {
  width: 64px;
  height: 16px;
}
.resumeDetails .job-resume-detail-content .userInfo .info-section .btn-desc {
  color: #4a4a4a;
  font-size: 14px;
}
/* 用户头像 */
.resumeDetails .job-resume-detail-content .userInfo .headImg img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  margin-top: 5px;
}
/* 状态信息 */
.resumeDetails .job-resume-detail-content .job-resume-model {
  /* height: 70px; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.resumeDetails
  .job-resume-detail-content
  .job-resume-model
  .job-resume-model-item {
  flex: 30%;
  height: 60px;
  font-size: 14px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.resumeDetails
  .job-resume-detail-content
  .job-resume-model
  .job-resume-model-item
  i {
  width: 14px;
  height: 14px;
  /* border: 1px solid black; */
}
.resumeDetails
  .job-resume-detail-content
  .job-resume-model
  .job-resume-model-item
  .job-resume-model-item-text {
  color: #808999;
}
.resumeDetails
  .job-resume-detail-content
  .job-resume-model
  .job-resume-model-item
  .job-resume-model-item-value {
  color: #172238;
}
/* 备注信息 */
.resumeDetails .job-resume-detail-content .remark-section {
  height: 42px;
  padding-bottom: 20px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.resumeDetails .job-resume-detail-content .remark-section .remark-content {
  width: 250px;
  color: #172238;
  margin-left: 20px;
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  position: relative;
}
.resumeDetails .job-resume-detail-content .remark-section img {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: -20px;
  cursor: pointer;
}
/* 备注部分 */
.resumeDetails .job-resume-detail-content .remark-section .remark-content div {
  color: #b5bac7;
  display: inline-block;
  margin-left: 10px;
}
.resumeDetails
  .job-resume-detail-content
  .remark-section
  .remark-content
  div
  input {
  width: 120px;
  color: #606266;
  font-size: 14px;
  outline: none;
  border: none;
}
.resumeDetails
  .job-resume-detail-content
  .remark-section
  .remark-content
  div
  button {
  color: #b5bac7;
  font-size: 14px;
  margin: 0 5px;
  border: none;
  background: none;
  cursor: pointer;
}
.resumeDetails
  .job-resume-detail-content
  .remark-section
  .remark-section-refresh {
  color: #808999;
}
/* 底部按钮部分 */
.resumeDetails .bottom-section {
  width: 520px;
  height: 80px;
  line-height: 80px;
  color: #172238;
  font-size: 14px;
  font-weight: 900;
  background: white;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  /* position: fixed;
    bottom: 0;
    right: 20px; */
  z-index: 99;
}
.resumeDetails .bottom-section > div > div {
  position: relative;
}
.resumeDetails .bottom-section > div > div > img {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 32px;
  left: -16px;
}
/* 标记部分 */
.resumeDetails .bottom-section .label-select {
  flex: 1;
  display: flex;
  position: relative;
}
/* 标记里隐藏三角形 */
.resumeDetails .bottom-section .label-select .label-triangle {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid transparent;
  border-bottom: 10px solid #56596a;
  position: absolute;
  top: 30px;
  left: 21px;
  transform: rotate(270deg);
}
/* 标记里隐藏的内容 */
.resumeDetails .bottom-section .label-select .select-options {
  width: 120px;
  height: 120px;
  line-height: 40px;
  color: white;
  font-size: 14px;
  background: #56596a;
  border-radius: 5px;
  position: absolute;
  top: -60px;
  left: 40px;
  display: flex;
  justify-content: space-around;
}
.resumeDetails
  .bottom-section
  .label-select
  .select-options
  > div:nth-child(1) {
  border-right: 1px solid white;
}
.resumeDetails .bottom-section .label-select .select-options > div {
  width: 90px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.resumeDetails .bottom-section .label-select .select-options > div img {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
/* 聊天部分 */
.resumeDetails .bottom-section .label-chat {
  flex: 1;
  display: flex;
  justify-content: space-around;
}
.resumeDetails .bottom-section .label-chat div {
  cursor: pointer;
}
</style>